import type { ButtonProps } from 'naive-ui/lib/button';
import type { GridItemProps, GridProps } from 'naive-ui/lib/grid';
import type { CSSProperties, PropType } from 'vue';

import type { FormSchema } from '@/components/form';

export interface BasicFormProps {
  /**
   * 标签宽度
   */
  labelWidth?: number | string;
  /**
   * 表单配置
   */
  schemas: FormSchema[];
  /**
   * 是否展示为行内表单
   */
  inline?: boolean;
  /**
   * 布局方式  horizontal | inline
   */
  layout?: string;
  /**
   * 大小
   */
  size?: string;
  /**
   * 标签位置
   */
  labelPlacement?: string;
  /**
   * 组件是否width 100%
   */
  isFull?: boolean;
  /**
   * 是否显示操作按钮（查询/重置）
   */
  showActionButtonGroup?: boolean;
  /**
   * 重置按钮配置
   */
  resetButtonOptions?: Partial<ButtonProps>;
  /**
   * 重置按钮文字
   */
  resetButtonText?: string;
  /**
   * 显示确认按钮
   */
  showSubmitButton?: boolean;
  /**
   * 是否显示重置按钮
   */
  showResetButton?: boolean;
  /**
   * 确认按钮配置
   */
  submitButtonOptions?: Partial<ButtonProps>;
  /**
   * 确认按钮文字
   */
  submitButtonText?: string;
  /**
   * 展开收起按钮
   */
  showAdvancedButton?: boolean;
  /**
   * 表单栅格配置
   */
  gridProps?: GridProps;
  /**
   * 栅格栏配置
   */
  giProps?: GridItemProps;
  /**
   * 表单重置函数
   */
  resetFunc?: () => Promise<void>;
  /**
   * 表单提交函数
   */
  submitFunc?: () => Promise<void>;
  /**
   * 重置时是否提交表单
   */
  submitOnReset?: boolean;
  /**
   * 栅格样式
   */
  baseGridStyle?: CSSProperties;
  /**
   * 是否折叠
   */
  collapsed?: boolean;
  /**
   * 默认展示的行数
   */
  collapsedRows?: number;
}

export const basicProps = {
  // 标签宽度  固定宽度
  labelWidth: {
    type: [Number, String] as PropType<number | string>,
    default: 80,
  },
  // 表单配置规则
  schemas: {
    type: [Array] as PropType<FormSchema[]>,
    default: () => [],
  },
  // 是否展示为行内表单
  inline: {
    type: Boolean,
    default: false,
  },
  // 布局方式  horizontal | inline
  layout: {
    type: String,
    default: 'horizontal',
  },
  // 大小
  size: {
    type: String,
    default: 'medium',
  },
  // 标签位置
  labelPlacement: {
    type: String,
    default: 'left',
  },
  // 组件是否width 100%
  isFull: {
    type: Boolean,
    default: true,
  },
  // 是否显示操作按钮（查询/重置）
  showActionButtonGroup: {
    type: Boolean,
    default: false,
  },
  // 显示重置按钮
  showResetButton: {
    type: Boolean,
    default: false,
  },
  // 重置按钮配置
  resetButtonOptions: {
    type: Object as PropType<Partial<ButtonProps>>,
  },
  // 重置按钮文字
  resetButtonText: {
    type: String,
    default: '重置',
  },
  // 显示确认按钮
  showSubmitButton: {
    type: Boolean,
    default: false,
  },
  // 确认按钮配置
  submitButtonOptions: {
    type: Object as PropType<Partial<ButtonProps>>,
  },
  // 确认按钮文字
  submitButtonText: {
    type: String,
    default: '查询',
  },
  // 展开收起按钮
  showAdvancedButton: {
    type: Boolean,
    default: true,
  },
  // grid 配置
  gridProps: {
    type: Object as PropType<GridProps>,
  },
  // gi配置
  giProps: {
    type: Object as PropType<GridItemProps>,
  },
  // grid 样式
  baseGridStyle: {
    type: Object as PropType<CSSProperties>,
  },
  // 是否折叠
  collapsed: {
    type: Boolean,
    default: false,
  },
  // 默认展示的行数
  collapsedRows: {
    type: Number,
    default: 1,
  },
};
